<template>
  <div class="seatBox">
    <div v-for="rowItem in seatData" class="row">
      <div v-for="colItem in rowItem.col" >
        <div class="col"  :style="{background:getColStatus(colItem) }" @click="clickColSeat(rowItem.rowKey,colItem )">
        </div>
      </div>
    </div>
  </div>

</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";

  const seatData = ref();
  // props传参
  const props = defineProps({
    seatData: Array
  })

  // 点击座位的emit传输事件
  const seatEmit = defineEmits(['clickSeat'])

  //监听数据变化
  watch(() => props.seatData, () => {
    seatData.value = props.seatData
    seatEmit('clickSeat',props.seatData)
  },{
    deep: true
  })

  // 挂载时设置data
  onMounted(() => {
    seatData.value = props.seatData
  })

  // 点击座位事件
  const clickColSeat = (rowKey, colData) => {
    const {status, colKey} = colData;
    // 设置改变数据
    const upData = seatData.value.map((item) => {
      const {col} = item
      if (item.rowKey === rowKey) { // 如果时当前排
        const colUpData = col.map((colItem) => {
          if (colKey === colItem.colKey) { // 判断点击是否当前座位
            return {
              colKey,
              status: Number(!status)
            }
          }
          return {...colItem}
        })
        return {
          ...item,
          col: colUpData
        }
      }
      return {...item}
    })
    seatData.value = upData
      // 给父组件传世点击的位置信息
    seatEmit('clickSeat',upData)
  }

  // 座位是否选中 颜色区分
  const getColStatus = (item: any) => {
    const {status} = item;
    return status ? 'red' : '#d7d7d7'
  }

</script>
<style>
  .seatBox{
    background: #d7d7d7;
    padding: 5px;
    .row{
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #f1f1f1;
      height: 40px;
      .col{
        height: 30px;
        width: 30px;
      }
    }
  }
</style>
